<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>HUI</title>
		<link rel="stylesheet" type="text/css" href="./css/hui.css" />
		<style type="text/css">
			body {
				background: #EAEAEC;
				padding: 0px;
				margin: 0px;
			}

			.title {
				width: 200px;
				height: 40px;
				line-height: 40px;
				position: absolute;
				left: 50%;
				margin-left: -100px;
				font-size: 17px;
				color: #000000;
			}

			#hui-back:before {
				color: #2439A5;
			}

			.hui-header {
				background: #FFF;
			}

			.form {
				width: 100%;
				background: #FFFFFF;
				margin-top: 16px;
			}

			.check {
				height: 49px;
				line-height: 49px;
				border-bottom: 1px solid #EAEAEC;
				margin-left: 20px;
				box-sizing: border-box;
				position: relative;
				background: #fff;
			}

			.check:last-child {
				border-bottom: none;
			}

			.hint {
				font-size: 17px;
				color: #333333;
			}

			.information {
				position: absolute;
				right: 15px;
				color: #999999;
				font-size: 16px;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		</style>
	</head>

	<body id="all">
		<header class="hui-header">
			<div id="hui-back"></div>
			<span class="title">驾驶证</span>
		</header>
		<div class="hui-wrap">
			<div class="form">
				<div class="check">
					<span class="hint">驾驶证号</span>
					<span id="a1" class="information" style="width: 210px;">123123123123</span>
				</div>
				<div class="check">
					<span class="hint">姓名</span>
					<span id="a2" class="information">张麒</span>
				</div>
				<div class="check">
					<span class="hint">国籍</span>
					<span id="a3" class="information">中国</span>
				</div>
				<div class="check">
					<span class="hint">地址</span>
					<span id="a4" class="information" style="width: 220px;">北京市海淀区小区号牌</span>
				</div>
				<div class="check">
					<span class="hint">初次领证日期</span>
					<span id="a5" class="information">2009-09-01</span>
				</div>
				<div class="check">
					<span class="hint">准驾车型</span>
					<span id="a6" class="information">C1</span>
				</div>
				<div class="check">
					<span class="hint">有效起始日期</span>
					<span id="a7" class="information">2009-09-01</span>
				</div>
				<div class="check">
					<span class="hint">有效期限</span>
					<span id="a8" class="information">10年</span>
				</div>
				<div class="check">
					<span class="hint">状态</span>
					<span id="a9" class="information">正常</span>
				</div>
			</div>
		</div>
		<script src="./js/hui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				hui('#a1').html(localStorage.getItem("idNumber"));
				hui('#a2').html(localStorage.getItem("name"));
				hui('#a3').html(localStorage.getItem("contry"));
				hui('#a4').html(localStorage.getItem("address"));
				
				hui('#a5').html(localStorage.getItem("firstIssueDate"));
				hui('#a6').html(localStorage.getItem("licenseClass"));
				hui('#a7').html(localStorage.getItem("validFrom"));
				hui('#a8').html(localStorage.getItem("licenseData"));
				hui('#a9').html(localStorage.getItem("licenseStatus"));
				pushHistory();
				window.addEventListener("popstate", function(e) {
					history.go(-2);
				}, false);

				function pushHistory() {
					var state = {
						title: "title",
						url: "#"
					};
					window.history.pushState(state, "title", "#");
				}
			});

			hui.BackDo = function() {
				history.go(-2);
				return false;
			}

		</script>
	</body>

</html>
